<template>
  <div id="roomList">
    <p class="title"><i class="iconfont icon-dianshiju switch"></i>{{this.$store.getters.getcatename}}</p>
    <div class="classlist"></div>
    <more class="roomitems"  :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
        <a :href="'https://m.douyu.com/'+item.rid" v-for="item in rooms" :key="item.rid">
          <div class="box">
            <img :src="item.roomSrc" alt="">
            <div class="roommessage">
              <div class="hn"><i class="iconfont icon-huo fire"></i>{{item.hn}}</div>
              <div class="anchor"><i class="iconfont icon-wode people"></i>{{item.nickname}}</div>
            </div>
          </div>
          <p class="roomtit">{{item.roomName}}</p>
        </a>
    </more>
  </div>
</template>
<script>
import {Loadmore} from 'mint-ui'
export default {
  components:{
    'more':Loadmore
  },
  data(){
    return {
      searchCondition:{
        pageNo:"1",
        pageSize:8,
      },
      rooms:[],
      allLoaded:false,//是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了  
      scrollMode:"auto" //移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动  
    }
  },
  created(){
    //页面加载完成后从缓存获取数据存到store中
    this.$store.commit('setcate1',sessionStorage.cate1Id)
    this.$store.commit('setcate2',sessionStorage.cate2Id)
    this.$store.commit('setcatename',sessionStorage.cate2Name)
    this.$store.commit('setshortName',sessionStorage.shortName)
    this.$store.commit('setrefpage',0)
    this.$store.commit('setpage',1)//下次直接获取第二页的数据
    this.getRoomList() //第一次查询数据
  },
  methods:{
    getRoomList(){   //查询数据
    console.log(this.$store.getters.getpage)
    // debugger
      this.$http.get('/api/room/list?type='+this.$store.getters.getshortname+'&page='+this.$store.getters.getpage).then(res=>{ /*?page=1&type= */ 
          this.more(res)
          // console.log(this.$store.getters.getpage)
          // console.log(this.$store.getters.getpagecount)
          if(this.$store.getters.getpage>=this.$store.getters.getpagecount){
            this.allLoaded = true;
          }
          this.rooms = this.rooms.concat(res.data.data.list)
      })
    },
    loadBottom(){
      this.$store.commit('setpage',1)
      this.getRoomList()
      this.$refs.loadmore.onBottomLoaded()
    },
    more(res){
      this.$store.commit('setpagecount',res.data.data.pageCount)
      this.$store.commit('setcate1',sessionStorage.cate1Id)
      this.$store.commit('setcate2',sessionStorage.cate2Id)
      this.$store.commit('setcatename',sessionStorage.cate2Name)
      this.$store.commit('setshortName',sessionStorage.shortName)
    }
  }
}
</script>
<style >
#roomList{
  overflow: scroll;
  overflow-y: auto;
  height: calc(100%-.5rem);

}
.title{
  width:100%;
  height:.42rem;
  line-height:.42rem;
  text-align:left;
  color: #424242;
  font-size:.12rem;
}
#roomList .title .switch{
  font-size:.12rem;
  margin:0 .05rem;
  color:#ff6600;
}
.roomitems{

}
.roomitems a{
  display: inline-block;
  width: 1.8rem;
  padding: 0 .05rem .05rem 0;
}
.roomitems a .box{
  position: relative;
  border-radius: .05rem;
  overflow: hidden;
}
.roomitems a img{
  width: 100%;
  vertical-align: top;
}
.roommessage{
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  color: white;
  font-size: .12rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hn{
  text-align: right;
  padding: 0 .05rem 0 0;
}
.anchor{
  text-align: left;
  padding: 0 .05rem;
}
.roomitems .roommessage .fire,.roomitems .roommessage .people {
  font-size: .12rem
}
.roomtit{
  font-size: .12rem;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
